<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>18.10</title>
		
		<style>
			  .parent {
			    display: flex;
				
				flex-direction: row;
				flex-wrap: wrap;
				
			    width: 500px; /* 容器宽度 */
			    border: 3px dashed #ccc;
				
				
				/* 弹性子项的对齐方式 
				 flex-start;
				 flex-end;
				center
				space-around;
				space-between;
				space-evenly;
				 */
				justify-content:space-evenly;
				
				
			  }
			
			  .child {
				  /* 子项宽度 总和大于容器宽度 */
			    width: 100px; 
			    padding: 6px;
			    border: 2px solid #000;
			  }
			  
		</style>
	</head>
	<body>
		
		
		<div class="parent">
		  <div class="child">A</div>
		  <div class="child">B</div>
		  <div class="child">C</div>
		  <div class="child">D</div>
		  <div class="child">E</div>

		</div>
		
		
	</body>
</html>